<script setup lang="ts">
//存储响应结果
import { computed, ref, watchEffect } from 'vue'
import { spaceSizeAnalyzeUsingPost } from '@/api/analyzeController.ts'
import { message } from 'ant-design-vue'
import VChart from 'vue-echarts'
import 'echarts'

const spaceSizeAnalyzeResponse = ref<API.SpaceSizeAnalyzeResponse[]>([])

interface Props {
  //空间 ID
  spaceId: string
  //是否查询公共图库
  queryPublic: boolean
  //全空间分析
  queryAll: boolean
}

const props = withDefaults(defineProps<Props>(), {
  queryAll: false,
  queryPublic: false,
})

async function spaceSizeAnalyze() {
  const resp = await spaceSizeAnalyzeUsingPost({
    spaceId: props?.spaceId,
    queryPublic: props?.queryPublic,
    queryAll: props?.queryAll,
  })
  if (resp.data.code === 0 && resp.data.data) {
    spaceSizeAnalyzeResponse.value = resp.data.data
  } else {
    message.error(resp.data.message)
  }
}

const options = computed(() => {
  return {
    tooltip: {
      trigger: 'item',
    },
    legend: {
      bottom: 10, // 图例放在底部
      data: spaceSizeAnalyzeResponse.value.map((item) => item.sizeRange),
    },
    series: [
      {
        name: '图片大小分布',
        type: 'pie',
        radius: '60%',
        data: spaceSizeAnalyzeResponse.value.map((item) => ({
          name: item.sizeRange,
          value: item.count,
        })),
        itemStyle: {
          borderRadius: 5,
        },
        label: {
          show: true,
          position: 'outside', // 标签放在饼图外部
          formatter: '{b}', // 只显示名称
        },
        labelLine: {
          show: true, // 显示标签连接线
        },
      },
    ],
  }
})

watchEffect(() => {
  spaceSizeAnalyze()
})
</script>

<template>
  <!--  空间图片大小分析，使用饼图-->
  <div id="spaceSizeAnalyze">
    <a-card style="height: 320px" title="空间图片大小分析">
      <v-chart :option="options" style="height: 300px" />
    </a-card>
  </div>
</template>

<style scoped></style>
